<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords"
          th:content="'HTML,Springboot,thymeleaf,markdown,Layui,个人博客,'+${myinfo.getWebname()}+','+${myinfo.getNickname()}"/>
    <title th:text="${myinfo.getWebname()}"></title>
    <link rel="icon" th:href="'/style/images/system/'+${myinfo.getWebicon()}">

    <!--bootstrap3-->
    <link rel="stylesheet" href="/dist/bootstrap3/css/bootstrap.min.css">
    <script src="/dist/jquery/jquery-3.4.1.min.js"></script>
    <script src="/dist/bootstrap3/js/bootstrap.min.js"></script>

    <!--font-awesome-->
    <link rel="stylesheet" href="/style/fonts/font-awesome.min.css">

    <!--自定义css-->
    <link rel="stylesheet" href="/style/css/me.css">
    <script src="/script/me.js"></script>

    <!--layui-->
    <link rel="stylesheet" href="/dist/layui/css/layui.css" media="all">
    <script src="/dist/layui/layui.js"></script>

    <!--semantic-->
    <link rel="stylesheet" href="/dist/semantic/semantic.min.css">

    <style type="text/css">
        .ui.image.img-circle.userphoto{
            width: 50px;
        }
    </style>

    <script language='javascript' th:inline="javascript">
        var web_time = [[${myinfo.getCreatetime()}]];

        function time() {
            var nowTime = new Date();
            var startTime = new Date(web_time);
            var xc = (nowTime.getTime() - startTime.getTime()) / 1000;
            var day = parseInt(xc / 86400);
            xc -= day * 86400;
            var hour = parseInt(xc / 3600);
            xc -= hour * 3600;
            var min = parseInt(xc / 60);
            var sec = parseInt(xc - min * 60);
            hour = guolv(hour);
            min = guolv(min);
            sec = guolv(sec);
            var str = day + '天' + hour + '小时' + min + '分' + sec;
            $("#recordTime").html(str);
        }
        setInterval(time, 1000);

        function changepwd(){
            var id = [[${user.getId()}]];
            var url = "/changepwd?id="+id;
            window.location.href = url;
        }
    </script>

    <script type="text/javascript">
        function changePreview(i){
            var path = "/style/images/system/user"+i+".jpg";
            $("#photopreview").attr('src',path);
            var spath = "user"+i+".jpg";
            $("#prophoto").val(spath);
        }
    </script>
</head>
<body>
<!--导航-->
<nav class="ui inverted attached navbar-fixed-top navbar-inverse m-shadow-small">
    <div class="ui container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle fa-inverse" data-toggle="collapse" data-target="#navbar-menu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div id="logo" class="navbar-brand navbar-logo">
                <a href="/"><img th:src="'/style/images/system/'+${myinfo.getBrandimg()}" class="img-circle"
                                 th:text="' '+${myinfo.getWebname()}"></a>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbar-menu">
            <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                <li class="navli"><a class="navbar-link" href="/index">首页</a></li>
                <li class="navli"><a class="navbar-link" href="/types">分类</a></li>
                <li class="navli"><a class="navbar-link" href="/tags">标签</a></li>
                <li class="navli"><a class="navbar-link" href="/archives">归档</a></li>
                <th:block th:if="${session.userinfo} != null">
                    <li class="navli"><a href="/space" class="navbar-link">我的空间</a></li>
                </th:block>
                <li class="navli"><a class="navbar-link" href="/me">关于我</a></li>
                <li class="navli"><a class="navbar-link" href="/link">友链</a></li>
                <li class=""><a href="javascript:void(0);" title="搜索"><i class="layui-icon layui-icon-search"></i></a>
                </li>
                <th:block th:if="${session.userinfo} != null">
                    <th:block th:if="${session.userinfo.getType()} == 'admin'">
                        <li class=""><a href="javascript:void(0);" id="manage-btn" title="后台管理"><i
                                class="layui-icon layui-icon-website"></i></a></li>
                    </th:block>
                    <li class="nav-wel"><label><cite>欢迎您：<a th:href="@{/userinfo/{id}(id=${session.userinfo.id})}"
                                                            th:text="${session.userinfo.nickname}"></a></cite></label>
                    </li>
                    <li><a class="nav-onoff" href="javascript:void(0);" id="logout-btn"> 退出</a></li>
                </th:block>
                <th:block th:if="${session.userinfo} == null">
                    <li><a class="nav-onoff" href="javascript:void(0);" id="login-btn">登录</a></li>
                </th:block>
            </ul>
        </div>
    </div>
</nav>
<!--导航结束-->

<!--分隔片段-->
<div class="nav-split"></div>
<!--分隔片段结束-->

<!--正文内容-->
<div class="m-container m-padded-large">
    <div class="ui container">

        <div class="ui stackable grid">

            <!--左侧内容-->
            <div class="eleven wide column">
                <div class="ui attached red segment">
                    <div class="ui middle aligned grid">
                        <div class="eight wide column">
                            <div align="center">
                                <h3>基本信息</h3>
                            </div>
                            <div class="ui form">
                                <form id="submitForm">
                                <div class="field">
                                    <label for="id">编号</label>
                                    <input type="text" name="id" id="id" readonly style="background-color: #efefef"
                                           th:value="${user.getId()}">

                                    <label for="account">用户名</label>
                                    <input type="text" name="account" id="account" readonly style="background-color: #efefef"
                                           th:value="${user.getAccount()}">

                                    <label for="name">姓名</label>
                                    <input type="text" name="name" id="name" required maxlength="10"
                                           onkeyup="value=value.replace(/\s+/g,'')"
                                           placeholder="请输入用户姓名" th:value="${user.getName()}">

                                    <label for="nickname">昵称</label>
                                    <input type="text" name="nickname" id="nickname" required maxlength="15"
                                           onkeyup="value=value.replace(/\s+/g,'')"
                                           placeholder="请输入昵称" th:value="${user.getNickname()}">

                                    <label for="sex">性别</label>
                                   <!-- <input type="text" name="sex" id="sex" required maxlength="1"
                                           placeholder="请输入性别" th:value="${user.getSex()}">-->

                                    <div class="ui field grid" id="sex">
                                        <label for="sexM">男</label>
                                        <input type="radio" value="M" name="sex" id="sexM" th:attr="checked=${user.getSex()}=='M'?true:false"/>
                                        <label for="sexF">女</label>
                                        <input type="radio" value="F" name="sex" id="sexF" th:attr="checked=${user.getSex()}=='F'?true:false"/>
                                    </div>

                                    <label for="age">年龄</label>
                                    <input type="text" name="age" id="age" required maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'')"
                                           placeholder="请输入年龄" th:value="${user.getAge()}">

                                    <label for="email">邮箱</label>
                                    <input type="text" name="email" id="email" required maxlength="32"
                                           onkeyup="value=value.replace(/\s+/g,'')"
                                           placeholder="请输入邮箱" th:value="${user.getEmail()}">

                                    <label for="mobile">电话</label>
                                    <input type="text" name="mobile" id="mobile" required maxlength="11"
                                           onkeyup="value=value.replace(/\s+/g,'')"
                                           placeholder="请输入电话号码" th:value="${user.getMobile()}">

                                    <input type="text" name="prophoto" id="prophoto" readonly hidden="" th:value="${user.getProphoto()}">
                                </div>

                                <button class="ui button teal" type="button" onclick="changeInfo()">确认修改</button>
                                <button class="ui button" type="reset">重置</button>
                                <a href="javascript:void(0);"><button class="ui button tiny red" type="button" onclick="changepwd()">修改密码</button></a>
                                </form>
                            </div>
                        </div>
                        <div class="eight wide column" align="center">
                            <h3>我的头像</h3>
                            <div class="ui images" align="center">
                                <img class="ui image img-circle" id="photopreview" th:src="'/style/images/system/'+${user.getProphoto()}" style="border: #7F007F 3px solid">
                            </div>
                            <div class="ui images" align="center">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user1.jpg" onclick="changePreview(1)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user2.jpg" onclick="changePreview(2)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user3.jpg" onclick="changePreview(3)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user4.jpg" onclick="changePreview(4)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user5.jpg" onclick="changePreview(5)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <br/>
                                <img class="ui image img-circle userphoto" src="/style/images/system/user6.jpg" onclick="changePreview(6)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user7.jpg" onclick="changePreview(7)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user8.jpg" onclick="changePreview(8)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user9.jpg" onclick="changePreview(9)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user10.jpg" onclick="changePreview(10)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <br/>
                                <img class="ui image img-circle userphoto" src="/style/images/system/user11.jpg" onclick="changePreview(11)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user12.jpg" onclick="changePreview(12)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user13.jpg" onclick="changePreview(13)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user14.jpg" onclick="changePreview(14)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                                <img class="ui image img-circle userphoto" src="/style/images/system/user15.jpg" onclick="changePreview(15)" onmouseout="this.style.border=null" onmouseover="this.style.border='2px solid red'">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--右侧内容-->
            <div class="five wide column">
                <!--我的名片-->
                <div class="ui segments" style="background-color: #fff;">
                    <div class="m-text-a ui horizontal divider ">MY INFORMATION</div>
                    <div id="feed_widget">
                        <div class="feed-about">
                            <div class="about-main">
                                <div class="about-img">
                                    <a href="/resume"><img th:src="'/style/images/system/'+${myinfo.getProphoto()}"></a>
                                </div>
                                <div class="about-name">—&nbsp;<th:block th:text="${myinfo.getNickname()}"/>&nbsp;—
                                </div>
                                <div class="about-the">
                                    <label class="about-motto" th:text="${myinfo.getMotto()}"></label>
                                </div>
                            </div>
                            <div class="about-contract">
                                <ul>
                                    <li><a data-toggle="weixinpopvoer" data-placement="right" data-trigger="hover"
                                           class="weixin" rel="external nofollow" href="javascript:void(0);"
                                           data-original-title="" title=""><i class="fa fa-weixin card"></i></a></li>
                                    <li><a class="qq" target="_blank" rel="external nofollow"
                                           th:href="'http://wpa.qq.com/msgrd?v=3&amp;uin='+${myinfo.getQq()}+'&amp;site=qq&amp;menu=yes'"
                                           title="QQ"><i class="fa fa-qq card"></i></a></li>
                                    <li><a class="weibo" target="_blank" th:href="${myinfo.getWeibo()}" title="微博"><i
                                            class="fa fa-weibo card"></i></a></li>
                                    <li><a class="github" target="_blank" th:href="${myinfo.getGithub()}"
                                           title="github"><i class="fa fa-github card"></i></a></li>
                                    <li><a class="rss" target="_blank" rel="external nofollow" href="" title="RSS订阅"><i
                                            class="fa fa-rss card"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--我的名片结束-->
                <!--分类-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="right aligned column ">
                                <a href="/types" target="_self">MORE <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">
                        <div class="ui fluid vertical menu">
                            <th:block th:each="type:${types}">
                                <a th:href="@{/type/{id}(id=${type.get('id')})}" class="item">
                                    <span th:text="${type.get('name')}"/>
                                    <div class="ui red basic left pointing label" th:text="${type.get('count')}"></div>
                                </a>
                            </th:block>
                        </div>
                    </div>
                </div>
                <!--分类结束-->
                <!--标签-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="right aligned column">
                                <a href="/tags" target="_self">MORE <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">
                        <th:block th:each="tag : ${tags}">
                            <a class="ui red basic left pointing label m-padded-small"
                               th:href="@{/tag/{id}(id=${tag.get('id')})}" target="_self">
                                <span th:text="${tag.get('name')}"/>
                                <div class="detail" th:text="${tag.get('count')}"></div>
                            </a></th:block>
                    </div>
                </div>
                <!--标签结束-->
                <!--传送门-->
                <div class="ui segments">
                    <div class="ui  secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="circle icon"></i>传送门
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">
                        <div class="ui cards">
                            <a class="yellow  card m-card-center" href="/tra">
                                <div class="content" style="background:url(/style/images/system/tra.png)">
                                    <div class="header">传送门</div>
                                    <div class="description">
                                        <p>我已经为您精心准备了小惊喜，赶快出发吧 go go go......</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!--传送门结束-->
                <!--公众号二维码-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="qrcode icon"></i>公众号
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">
                        <h4 class="ui horizontal divider header">欢迎关注我的公众号</h4>
                        <div class="ui centered card" style="width: 8em">
                            <img src="/style/images/system/wxgzh.jpg" alt="" class="ui rounded image"
                                 style="width: 8em">
                        </div>
                    </div>
                </div>
                <!--公众号二维码结束-->

                <!--公众号二维码-->
                <!--<h4 class="ui horizontal divider header">我的公众号</h4>
                <div class="ui centered card" style="width: 11em">
                    <img src="/style/images/system/wxgzh.jpg" alt="" class="ui rounded image" style="width: 11em">
                </div>-->
                <!--公众号二维码结束-->
            </div>
            <!--右侧内容结束-->
        </div>
    </div>
</div>
<!--正文内容结束-->

<!--底部内容-->
<footer class="ui inverted vertical segment m-padded-large">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="four wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="/style/images/system/wx.jpg" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-text-bold m-text-spaced">联系我</h4>
                <div class="ui inverted link list">
                    <a class="item footer-contract"
                       th:href="'mailto:'+${myinfo.getEmail()}+'?subject='+${myinfo.getWebname()}"
                       th:text="'Email: '+${myinfo.getEmail()}"></a>
                    <a class="item footer-contract" rel="external nofollow" target="_blank"
                       th:href="'http://wpa.qq.com/msgrd?v=3&amp;uin='+${myinfo.getQq()}+'&amp;site=qq&amp;menu=yes'"
                       title="QQ" th:text="'QQ: '+${myinfo.getQq()}"></a>
                </div>
            </div>
            <div class="eight wide column">
                <h4 class="ui inverted header m-text-bold m-text-spaced">站点说明</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini" align="">本站仅作为学习交流使用，未经许可不得用于任何商业目的。
                    <br/>本站所有内容如需转载请注明出处。
                    <br/>如有不足之处，欢迎各位对本站提出宝贵的意见。</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny"
           th:text="${myinfo.getRecord()}"></p>
    </div>
</footer>
<!--底部内容结束-->
<!--返回顶部-->
<div id="toolBackTop" style="right: 56.375px;" hidden>
    <a class="sider-top" href="javascript:void (0);" title="返回顶部" onclick="gotop();return false;"></a>
</div>
<!--返回顶部结束-->
<script src="/dist/semantic/semantic.min.js"></script>
<script>
    $('.m-menu.m-toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
</script>
<script language="javascript">
    layui.use(['layer'],function() {
        var layer = parent.layer === undefined ? layui.layer : top.layer;
    });

    function changeInfo(){
        var age = $('#age').val();
        var name = $('#name').val();
        var nickname = $('#nickname').val();
        var mobile = $('#mobile').val();
        var email = $('#email').val();
        if(name ==''){
            layer.msg("姓名不能为空", {icon: 2});return;
        }
        if(nickname ==''){
            layer.msg("昵称不能为空", {icon: 2});return;
        }
        if(age ==''){
            layer.msg("年龄不能为空", {icon: 2});return;
        }
        if(mobile ==''){
            layer.msg("手机号不能为空", {icon: 2});return;
        }else{
            if(!(/^1[3456789]\d{9}$/.test(mobile))){
                layer.msg("手机号码有误，请重填", {icon: 2});return;
            }
        }
        if(email ==''){
            layer.msg("邮箱不能为空", {icon: 2});return;
        }else{
            var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/; //正则表达式
            if(!(reg.test(email))){
                layer.msg("邮箱有误，请重填", {icon: 2});return;
            }
        }

        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/user/update",//url
            data: $("#submitForm").serialize(),
            success: function (result) {
                if(result.flag =="success"){
                    layer.msg("修改个人信息成功！", {icon: 1});
                }else if(result.flag == "failed_email"){
                    layer.msg("您输入的邮箱已经存在，请重新输入！", {icon: 2});
                }else{
                    layer.msg("修改个人信息失败！", {icon: 2});
                }
            }, error: function () {
                layer.msg("修改个人信息失败，请重试！", {icon: 2});
            }
        });

    }
</script>
</body>
</html>